import { useState } from "react";
import styles from "./index.less";
import { Reorder } from "motion/react";

export default () => {
    const [items, setItems] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]);

    return (
        <div className={styles.container}>
            <div className={styles.card}>
                <p>拖拽排序</p>
                
                <div className={styles.listContainer}>
                    <Reorder.Group axis="y" values={items} onReorder={setItems}>
                        {items.map((item) => (
                            <Reorder.Item key={item} value={item} whileDrag={{ scale: 1.05, opacity: 0.85, backgroundColor: '#ffd12a', zIndex: 100, }} >
                                List Item {item}
                            </Reorder.Item>
                        ))}
                    </Reorder.Group>
                </div>
            </div>
        </div>
    );
};
